<!doctype html>
<html class="html-index-index">

<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />
    <title>风云呼</title>
    <link rel="stylesheet"
          type="text/css"
          href="./skin/css/bootstrap.min.css?v=1.0.0" />
    <link rel="stylesheet"
          type="text/css"
          href="./skin/css/font-awesome.min.css?v=1.0.0" />
    <link rel="stylesheet"
          type="text/css"
          href="./skin/icon/iconfont.css?v=2" />
    <link rel="stylesheet"
          type="text/css"
          href="./skin/css/common.css?v=2" />
    <link rel="stylesheet"
          type="text/css"
          href="./skin/css/member.css?v=6" />


</head>

<body class="body-index-index">
    <div class="phone-box">

        <header class="header">
            <div class="header-right">
                <!-- <a href="javascript:void(0);"
                   id="customerServiceBtn">
                    <i class="fa fa-commenting-o"></i>
                    客服
                </a> -->
            </div>
            <div class="header-center box-center">风云呼</div>
        </header>
        <div class="container"
             id="app">
            <div class="header-line"></div>
            <div class="page-body">

                <div class="row user-info">
                    <div class="user-info-radius">
                        <table>
                            <tr>
                                <th>
                                    <i class="iconfont icon-user text-blue"></i>
                                </th>
                                <td class="name">账号</td>
                                <td class="text">{{username}}</td>
                            </tr>
                            <tr>
                                <th>
                                    <i class="iconfont icon-level text-blue"></i>
                                </th>
                                <td class="name">类型</td>
                                <td class="text">
                                    <!-- 无 <a href="http://www.znyh123.com/abc/45/?m=buy&a=index"
                                       class="label label-danger">
                                        <i class="fa fa-link"></i>
                                        购买
                                    </a> -->
                                    {{card_type}}
                                </td>
                            </tr>
                            <tr>
                                <th>
                                    <i class="iconfont icon-time text-blue"></i>
                                </th>
                                <td class="name">到期</td>
                                <td class="text">
                                    {{isEnd ? '已过期' : endTime}}
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="row">
                    <div class="space-15 bg-gray"></div>
                </div>
                <form action="/abc/45/?m=index&a=index"
                      method="post"
                      onsubmit="return false;"
                      id="post">
                    <div class="call-center">
                        <div class="call-center-pending-box">
                            <div class="control-label">
                                <i class="iconfont icon-phone text-blue"></i>
                                手机号
                            </div>
                            <div class="call-center-list">
                            </div>
                            <div id="phoneItem">
                                <div class="input-group"
                                     v-for="(tel,idx) in tels"
                                     :key="idx">
                                    <input type="tel"
                                           maxlength="11"
                                           :value="tel"
                                           @change="(e) => onChange(e,idx)"
                                           class="form-control text-center"
                                           placeholder="请输入手机号" />
                                    <div class="input-group-btn">
                                        <a class="btn btn-default"
                                           @click="add">
                                            <i class="fa fa-plus"></i>
                                        </a>
                                        <a class="btn btn-danger"
                                           @click="del(idx)">
                                            <i class="fa fa-trash"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <a class="btn btn-danger btn-block btn-md"
                               @click="add"
                               id="addPhone">
                                <i class="fa fa-plus"></i>
                                <span>添加手机号</span>
                            </a>
                            <div class="call-center-pending"></div>
                        </div>
                        <div class="call-center-btns row">
                            <div class="col-xs-6">
                                <button class="btn btn-success btn-md btn-block"
                                        id="startCall"
                                        @click="handleCall('start')">
                                    <i class="iconfont icon-start-call"></i>
                                    <span>开始云呼</span>
                                </button>
                            </div>
                            <div class="col-xs-6">
                                <button class="btn btn-warning btn-md btn-block"
                                        type="button"
                                        id="endCall"
                                        @click="handleCall('stop')">
                                    <i class="iconfont icon-end-call"></i>
                                    停止云呼
                                </button>
                            </div>
                        </div>
                    </div>
                </form>

                <div class="calling"
                     v-if="calling.length">
                    <br>
                    呼叫中的手机号码：
                    <li v-for="(c,idx) in calling"
                        :key="idx">{{c}}</li>
                </div>
                <div class="space-15"></div>
                <a class="btn btn-default btn-block text-gray btn-md"
                   style="border-color: #EEE;"
                   href="./login.html">退出登录</a>
                <div class="space-15"></div>
                <div class="space-15 bg-gray row"></div>
                <div class="row">
                    <div class="padding-15 footer"
                         v-if="false">
                        <div class="text-center footer-bar">
                            <a href="http://www.znyh123.com/abc/45/?m=public&a=liar">
                                <i class="iconfont icon-cx text-blue size-16"></i>
                                防骗查询
                            </a>
                            <a href="http://www.znyh123.com/abc/45/?m=complain&a=index">
                                <i class="iconfont icon-feedback text-red size-16"></i>
                                投诉/反馈
                            </a>
                        </div>
                        <div class="customer">
                            <a href="http://wpa.qq.com/msgrd?v=3&uin=123456&site=qq&menu=yes">
                                <i class="iconfont icon-qq text-blue size-16"></i>
                                QQ号:123456 </a>

                            <a href="javascript:void(0);">
                                <i class="iconfont icon-wechat text-wechat size-16"></i>
                                微信号:雷神短信已经上线 </a>
                        </div>
                    </div>
                </div>


            </div>
            <div class="footer-line"></div>
        </div>
    </div>
    <script type="text/javascript"
            src="./data/plugin/jquery/jquery.min.js?v=1.0.0"></script>
    <script type="text/javascript"
            src="./data/plugin/ui/js/bootstrap.min.js"></script>
    <script type="text/javascript"
            src="./skin/js/layer/layer.min.js?v=1.0.0"></script>
    <script type="text/javascript"
            src="./skin/js/common.js?v=4444"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        $(function () {
            $('#customerServiceBtn').on('click', function () {
                var customerServicePop = layer.open({
                    className: 'customer-service-pop',
                    content: '<div class="border-sizing">' +
                        '   <div class="col-xs-6">' +
                        '       <i class="server-wechat"></i>' +
                        '       <span>雷神短信已经上线</span>' +
                        '   </div>' +
                        '   <div class="col-xs-6">' +
                        '       <i class="server-qq"></i>' +
                        '       <a href="http://wpa.qq.com/msgrd?v=3&uin=123456&site=qq&menu=yes" target="_blank">123456</a>' +
                        '   </div>' +
                        '   <div class="clearfix"></div>' +
                        '</div>' +
                        '<a id="closeCustomerServiceBtn" class="fa fa-times-circle-o fa-2x text-blue"></a>',
                    success: function () {
                        $('#closeCustomerServiceBtn').on('click', function () {
                            layer.close(customerServicePop);
                        });
                    }
                });
            });

            bParseResult.bindCode('3010001', 1, function (requestCode, json) {
                bDialog.alert(json.message, function () {
                    self.location.href = 'http://www.znyh123.com/abc/45/?m=buy&a=index';
                });

                return false;
            });

            bParseResult.bindCode('3010000', 1, function (requestCode, json) {
                bDialog.alert(json.message, function () {
                    self.location.href = 'http://www.znyh123.com/abc/45/?m=passport&a=login';
                });

                setTimeout(function () {
                    self.location.href = 'http://www.znyh123.com/abc/45/?m=passport&a=login';
                }, 3000);

                return false;
            });
        });
    </script>
    <script src="./fetch.js"></script>
    <script>
        var cardTypeMap = ['', '1号月卡', '3号月卡', '5号月卡', '50号月卡', '1号年卡', '3号年卡', '5号年卡', '50号年卡', '1号永久卡', '3号永久卡', '5号永久卡', '50号永久卡', '3分钟体验卡']
        var app = new Vue({
            el: '#app',
            data: {
                tels: [''],
                card_type: '',
                username: sessionStorage.getItem('username'),
                calling: [],
                end_time: ''
            },
            computed: {
                isEnd() {
                    return new Date(this.end_time).getTime() < new Date().getTime()
                },
                endTime() {
                    return new Date(this.end_time).toLocaleString('zh', { hour12: false })
                }
            },
            created() {
                $http('/api/get_my_info/', { username: sessionStorage.getItem('username') }).then(res => {
                    this.card_type = cardTypeMap[res.card_type]
                    this.end_time = res.end_time
                    if (res.phones && res.phones.length) {
                        this.calling = res.phones
                        this.tels = res.phones
                    }

                })
            },
            methods: {
                add() {
                    if (this.card_type === '3分钟体验卡') {
                        this.tels.push('')
                    } else {
                        var max = +this.card_type.replace(/[^0-9]/ig, "")
                        if (this.tels.length < max) {
                            this.tels.push('')
                        } else {
                            alert('最多只能拨打' + max + '个电话')
                        }
                    }
                },
                del(idx) {
                    this.tels.splice(idx, 1)
                },
                onChange(e, idx) {
                    this.tels.splice(idx, 1, e.target.value)
                },
                handleCall(handle) {
                    $http('/api/call_num/', {
                        handle,
                        phone_num: this.tels.join(',')
                    }).then(res => {
                        this.calling = handle === 'start' ? this.tels : []
                        alert('操作成功')
                    })
                },
            }
        })
        // $(function () {
        //     var phoneItem = $('#phoneItem').html();
        //     var $phoneList = $('.call-center-list');
        //     var $phone = $('#phone');
        //     var $addPhone = $('#addPhone');
        //     var $post = $("#post");
        //     var $startCall = $("#startCall");
        //     var $endCall = $("#endCall");
        //     var $callPending = $('.call-center-pending');
        //     var phoneIndex = 0;

        //     var showCallPending = function () {
        //         $startCall.prop('disabled', true).removeClass('btn-success').addClass('btn-warning').find('span').text('云呼中...');
        //         $endCall.prop('disabled', false).removeClass('btn-warning').addClass('btn-success');
        //         $callPending.removeClass('hide');
        //     };

        //     var hideCallPending = function () {
        //         $startCall.prop('disabled', false).removeClass('btn-warning').addClass('btn-success').find('span').text('开始云呼');
        //         $endCall.prop('disabled', true).removeClass('btn-success').addClass('btn-warning');
        //         $callPending.addClass('hide');
        //     };

        //     var updateAddBtn = function () {
        //         if (phoneIndex <= 0) {
        //             phoneIndex = 0;
        //             $addPhone.find('span').text('添加手机号');
        //         } else {
        //             $addPhone.find('span').text('继续添加手机号');
        //         }
        //     };

        //     // 获取当前状态
        //     var getStatusTimer = null;
        //     var getStatus = function (pending) {
        //         pending = typeof pending === 'boolean' ? pending : true;
        //         $.BRequest().setPendingModel(pending).setUrl('http://www.znyh123.com/abc/45/?m=index&a=status').setSuccess(function (json) {
        //             if (!json.result.have) {
        //                 hideCallPending();
        //                 phoneIndex = 0;
        //                 $phoneList.html('');
        //                 addItem('');
        //             } else {
        //                 phoneIndex = 0;
        //                 $phoneList.html('');
        //                 for (var i = 0; i < json.result.list.length; i++) {
        //                     addItem(json.result.list[i]);
        //                 }
        //                 showCallPending();
        //             }
        //             getStatusTimer = setTimeout(function () {
        //                 clearTimeout(getStatusTimer);
        //                 getStatus(false);
        //             }, 1000 * 60);
        //         }).request();
        //     };

        //     // 添加列队
        //     var addItem = function (phone) {
        //         var $item = $(phoneItem);
        //         $item.find('input').val(phone).attr('name', 'phone[' + phoneIndex + ']');
        //         $item.find('.btn-default').on('click', function () {
        //             addItem('');
        //         });
        //         $phoneList.append($item);
        //         phoneIndex++;
        //         updateAddBtn();
        //     };

        //     // 添加手机号
        //     $addPhone.on('click', function () {
        //         addItem('');
        //     });

        //     // 移除列队
        //     $phoneList.on('click', '.btn-danger', function () {
        //         $(this).closest('.input-group').remove();
        //         phoneIndex--;
        //         updateAddBtn();
        //     });

        //     // 提交呼叫
        //     $post.autoSubmit(null, null, function (json) {
        //         bDialog.toastSuccess(json.message);
        //         getStatus();
        //         showCallPending();
        //     }, function (json) {
        //         // 已有任务存在
        //         if (json.name === 'queue_pending') {
        //             showCallPending();
        //         }

        //         bDialog.toastError(json.message);
        //     }, null, false);

        //     // 停止呼叫
        //     $endCall.on('click', function () {
        //         $.BRequest().setUrl('http://www.znyh123.com/abc/45/?m=index&a=stop').setSuccess(function () {
        //             hideCallPending();
        //         }).request();
        //     });

        //     $callPending.on('click', function () {
        //         bDialog.toast('正在云呼中...');
        //     });

        //     // getStatus();
        //     phoneIndex = 0;
        //     $phoneList.html('');
        //     addItem('');
        // });
    </script>

</body>

</html>
